<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
		*{margin: 0;padding: 0;}
		.wrap{height: 80px;width: 100%;background: cadetblue;display: flex;}
		.wrap div{font-family: "arial, helvetica, sans-serif";line-height: 80px;color: #fff;}
		.wrap .logo{font-size: 25px;font-weight: 600;float: left;padding: 0 20px 0 50px;}
		.date{width: 20%;float: right;box-sizing: border-box;padding: 0 20px;}
		.notice{
			float: left;
			width: 100%;
			overflow: hidden;
			position: relative;
		}
        .marquee{         
            white-space: nowrap;
            box-sizing: border-box;
			position: absolute;
            animation: marquee 50s linear infinite;
        }
 
        .marquee:hover {
            animation-play-state: paused
        }
 
        /* Make it move */
        @keyframes marquee {
            0%   { text-indent: 0% }
            100% { text-indent: -100% }
        }
    </style>

</head>
<body>
    <div class="wrap">
		<div class="logo">logo</div>
		<div class="notice">
			<p class="marquee">重要通知：<a>请点击链接下载最新安装包！<a/>&nbsp&nbsp&nbsp&nbsp公告：关于XXXX的通知，请广而告之！&nbsp&nbsp&nbsp&nbsp重要通知：<a>请点击链接下载最新安装包！<a/>&nbsp&nbsp&nbsp&nbsp公告：关于XXXX的通知，请广而告之！&nbsp&nbsp&nbsp&nbsp重要通知：<a>请点击链接下载最新安装包！<a/>&nbsp&nbsp&nbsp&nbsp公告：关于XXXX的通知，请广而告之！&nbsp&nbsp&nbsp&nbsp重要通知：<a>请点击链接下载最新安装包！<a/>&nbsp&nbsp&nbsp&nbsp公告：关于XXXX的通知，请广而告之！&nbsp&nbsp&nbsp&nbsp</p>
		</div>
		<div class="date">2019/7/30 12:28:28</div>
	</div>

</body>
</html>